<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="income-summary">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="income-item">
              <div class="title">今日总收入</div>
              <div class="amount">¥ {{todayTotal}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="income-item">
              <div class="title">现金收入</div>
              <div class="amount">¥ {{cashIncome}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="income-item">
              <div class="title">在线支付</div>
              <div class="amount">¥ {{onlineIncome}}</div>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-table
        v-loading="loading"
        :data="incomeList"
        style="margin-top: 20px;">
        <el-table-column label="订单编号" align="center" prop="orderNo" />
        <el-table-column label="支付方式" align="center" prop="payType" />
        <el-table-column label="支付金额" align="center" prop="amount" />
        <el-table-column label="支付时间" align="center" prop="payTime" />
        <el-table-column label="备注" align="center" prop="remark" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Income",
  data() {
    return {
      loading: false,
      todayTotal: 0,
      cashIncome: 0,
      onlineIncome: 0,
      incomeList: []
    }
  },
  created() {
    this.getIncomeData()
  },
  methods: {
    getIncomeData() {
      this.loading = true
      // 这里添加获取收入数据的接口调用
      // 示例数据
      setTimeout(() => {
        this.todayTotal = 5000
        this.cashIncome = 2000
        this.onlineIncome = 3000
        this.incomeList = [
          {
            orderNo: 'ORDER2024001',
            payType: '现金支付',
            amount: 500,
            payTime: '2024-03-20 10:00:00',
            remark: '停车费'
          }
        ]
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style scoped>
.income-summary {
  padding: 20px 0;
}
.income-item {
  text-align: center;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 4px;
}
.income-item .title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}
.income-item .amount {
  font-size: 24px;
  color: #409EFF;
  font-weight: bold;
}
</style> 